import { Button, FormInstance, Input, message, Modal, Space, Tree } from 'antd';
import React, { Component, createRef, RefObject } from 'react';
import { getAllPermission } from '../../api/permission';
import { Form } from 'antd'
import { addRole } from '../../api/role';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};


interface IPermission {
    id: number
    key: number
    isMenu: number
    parentId: number
    path: string
    title: string
    children: IPermission[]
}

interface IPorps {
    visible: boolean
    callback: (refresh?:boolean) => void
}

interface IState {
    nodeList: IPermission[]
}

class AddRole extends Component<IPorps, IState> {
    formRef: RefObject<FormInstance>

    constructor(props: IPorps, context: any) {
        super(props, context);
        this.state = {
            nodeList: []
        }
        this.formRef = createRef<FormInstance>()
    }


    cancel = () => {
        this.props.callback()
    }

    onCheck = (checkedKeys: any) => {
        this.formRef.current?.setFieldsValue({permissionList:checkedKeys.checked})
    }

    addRole=(form:any)=>{
        console.log('====================================');
        console.log( JSON.stringify(form));
        console.log('====================================');

        this.props.callback(true)
        this.formRef.current?.resetFields()

        // addRole(form).then(res=>{
        //     const { code , msg} = res.data
        //     if(code === 0){
        //         message.success(msg)
        //     }else{
        //         message.error(msg)
        //     }
        // })
    }

    getAllPermission = () => {
        // getAllPermission().then(res => {
        //     const { data } = res.data
        //     console.log('====================================');
        //     console.log(data);
        //     console.log('====================================');
        //     this.setState({
        //         nodeList:this.generatePermissionList(data)
        //     })
        // })
        const list: IPermission[] = [
            { path: "/rule/add", id: 1, key: 1, isMenu: 1, parentId: 0, title: "仪表盘", children: [] },
            { path: "/rule/add", id: 2, key: 2, isMenu: 1, parentId: 0, title: "角色管理", children: [] },
            { path: "/rule/add", id: 3, key: 3, isMenu: 1, parentId: 0, title: "管理员管理", children: [] },
            { path: "/rule/add", id: 4, key: 4, isMenu: 1, parentId: 0, title: "用户管理", children: [] },
            { path: "/rule/add", id: 5, key: 5, isMenu: 1, parentId: 0, title: "活动管理", children: [] },
            { path: "/rule/add", id: 6, key: 6, isMenu: 1, parentId: 0, title: "产品管理", children: [] },
            { path: "/rule/add", id: 7, key: 7, isMenu: 1, parentId: 2, title: "角色列表", children: [] },
            { path: "/rule/add", id: 8, key: 8, isMenu: 1, parentId: 3, title: "管理员列表", children: [] },
            { path: "/rule/add", id: 9, key: 9, isMenu: 1, parentId: 4, title: "用户列表", children: [] },
            { path: "/rule/add", id: 10, key: 10, isMenu: 1, parentId: 5, title: "活动管理", children: [] },
            { path: "/rule/add", id: 11, key: 11, isMenu: 1, parentId: 6, title: "活动管理", children: [] },
            { path: "/rule/add", id: 12, key: 12, isMenu: 1, parentId: 7, title: "编辑角色", children: [] },
            { path: "/rule/add", id: 13, key: 13, isMenu: 1, parentId: 7, title: "删除角色", children: [] },
            { path: "/rule/add", id: 14, key: 14, isMenu: 1, parentId: 7, title: "添加角色", children: [] },
            { path: "/rule/add", id: 15, key: 15, isMenu: 1, parentId: 8, title: "编辑管理员", children: [] },
            { path: "/rule/add", id: 16, key: 16, isMenu: 1, parentId: 8, title: "删除管理员", children: [] },
            { path: "/rule/add", id: 17, key: 17, isMenu: 1, parentId: 9, title: "删除用户", children: [] },
            { path: "/rule/add", id: 18, key: 18, isMenu: 1, parentId: 4, title: "编辑用户信息", children: [] },
            { path: "/rule/add", id: 19, key: 19, isMenu: 1, parentId: 5, title: "活动列表", children: [] },
            { path: "/rule/add", id: 20, key: 20, isMenu: 1, parentId: 6, title: "产品列表", children: [] },
        ]
        this.setState({
            nodeList: this.generatePermissionList(list)
        })
    }

    generatePermissionList = (permissionList: IPermission[], parentId: number = 0,) => {
        let pList: IPermission[] = []
        permissionList.forEach(permission => {
            if (permission.parentId === parentId) {
                permission.children = this.generatePermissionList(permissionList, permission.id)
                pList.push(permission)
            }

        })
        return pList;
    }
    componentDidMount() {
        this.getAllPermission()
    }
    render() {
        return (
            <>
                <Modal
                    title='添加角色'
                    visible={this.props.visible}
                    onCancel={this.cancel}
                    footer={null}
                >

                    <Form
                        ref={this.formRef}
                        {...layout}
                        onFinish={this.addRole}
                        initialValues={{
                            roleName: "",
                            permissionList: []
                        }}
                    >
                        <Form.Item
                            name={'roleName'}
                            label="角色名称"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    validator: (rule, value) => {
                                        if (value === undefined || value === '') {
                                            return Promise.reject('角色名称不能为空')
                                        }
                                        if (value.length < 2) {
                                            return Promise.reject('长度不得小于两位')
                                        }
                                        return Promise.resolve('1')
                                    }
                                }
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            name='permissionList'
                            label={'权限'}
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    validator: (rule, value) => {
                                        if (value === undefined || value === '') {
                                            return Promise.reject('至少选择一个权限')
                                        }
                                        if (value.length <= 0) {
                                            return Promise.reject('至少选择一个权限')
                                        }
                                        return Promise.resolve()
                                    }
                                }
                            ]}
                        >

                            <Tree
                                defaultExpandAll
                                checkStrictly
                                showLine
                                checkable
                                treeData={this.state.nodeList}
                                onCheck={this.onCheck}
                            />

                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Space>
                                <Button type="primary" htmlType="submit">添加角色</Button>
                                <Button type="default" htmlType="reset">重置</Button>
                            </Space>
                        </Form.Item>

                    </Form>

                </Modal>
            </>
        );
    }
}

export default AddRole;